<template>
  <div class="case-library">
    <div class="page-header">
      <h1>用例库管理</h1>
      <p class="subtitle">管理和维护日志分析用例库</p>
    </div>

    <div class="content-area">
      <n-card title="用例库概览" class="overview-card">
        <n-grid :cols="3" :x-gap="16" :y-gap="16">
          <n-grid-item>
            <n-statistic label="总用例数" :value="totalCases" />
          </n-grid-item>
          <n-grid-item>
            <n-statistic label="活跃用例" :value="activeCases" />
          </n-grid-item>
          <n-grid-item>
            <n-statistic label="本月新增" :value="newCases" />
          </n-grid-item>
        </n-grid>
      </n-card>

      <n-card title="用例管理" class="management-card">
        <template #header-extra>
          <n-button type="primary" @click="showAddCase = true">
            <template #icon>
              <n-icon><AddOutline /></n-icon>
            </template>
            添加用例
          </n-button>
        </template>

        <n-table :bordered="false" :single-line="false">
          <thead>
            <tr>
              <th>用例名称</th>
              <th>类型</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="case_ in caseList" :key="case_.id">
              <td>{{ case_.name }}</td>
              <td>{{ case_.type }}</td>
              <td>{{ case_.createTime }}</td>
              <td>
                <n-tag :type="case_.status === 'active' ? 'success' : 'warning'">
                  {{ case_.status === 'active' ? '活跃' : '停用' }}
                </n-tag>
              </td>
              <td>
                <n-space>
                  <n-button size="small" @click="editCase(case_)">编辑</n-button>
                  <n-button size="small" type="error" @click="deleteCase(case_.id)">删除</n-button>
                </n-space>
              </td>
            </tr>
          </tbody>
        </n-table>
      </n-card>
    </div>

    <!-- 添加用例对话框 -->
    <n-modal v-model:show="showAddCase" preset="card" title="添加用例" style="width: 600px">
      <n-form :model="newCase" :rules="rules" ref="formRef">
        <n-form-item label="用例名称" path="name">
          <n-input v-model:value="newCase.name" placeholder="请输入用例名称" />
        </n-form-item>
        <n-form-item label="用例类型" path="type">
          <n-select v-model:value="newCase.type" :options="caseTypes" placeholder="请选择用例类型" />
        </n-form-item>
        <n-form-item label="用例描述" path="description">
          <n-input v-model:value="newCase.description" type="textarea" placeholder="请输入用例描述" />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="showAddCase = false">取消</n-button>
          <n-button type="primary" @click="addCase">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { AddOutline } from '@vicons/ionicons5'

// 响应式数据
const showAddCase = ref(false)
const totalCases = ref(156)
const activeCases = ref(142)
const newCases = ref(23)

const caseList = ref([
  {
    id: 1,
    name: '数据库连接异常分析',
    type: '错误分析',
    createTime: '2024-01-15',
    status: 'active'
  },
  {
    id: 2,
    name: '用户登录失败检测',
    type: '安全分析',
    createTime: '2024-01-14',
    status: 'active'
  },
  {
    id: 3,
    name: '系统性能监控',
    type: '性能分析',
    createTime: '2024-01-13',
    status: 'inactive'
  }
])

const newCase = reactive({
  name: '',
  type: '',
  description: ''
})

const caseTypes = [
  { label: '错误分析', value: '错误分析' },
  { label: '安全分析', value: '安全分析' },
  { label: '性能分析', value: '性能分析' },
  { label: '业务分析', value: '业务分析' }
]

const rules = {
  name: {
    required: true,
    message: '请输入用例名称',
    trigger: 'blur'
  },
  type: {
    required: true,
    message: '请选择用例类型',
    trigger: 'change'
  }
}

// 方法
function editCase(case_: any) {
  console.log('编辑用例:', case_)
}

function deleteCase(id: number) {
  console.log('删除用例:', id)
}

function addCase() {
  console.log('添加用例:', newCase)
  showAddCase.value = false
}
</script>

<style scoped>
.case-library {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--n-text-color);
}

.subtitle {
  margin: 0;
  color: var(--n-text-color-3);
  font-size: 14px;
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview-card {
  margin-bottom: 24px;
}

.management-card {
  flex: 1;
}
</style> 